@extends('WShop::layout')
@push('styles')
    <link href="{{asset(config('view.frontend.wap_login').'/css/mui.picker.css')}}" rel="stylesheet" />
    <link href="{{asset(config('view.frontend.wap_login').'/css/mui.poppicker.css')}}" rel="stylesheet" />
@endpush
@section('content')
    @component('WShop::public.header')
        @slot('page_title'){{$page_title}} @endslot
    @endcomponent
    <div class="mui-content mui-scroll-wrapper bg-fff" id="pullrefresh">
        <div class="mui-scroll">
            <div class="mui-table-view mui-table-view-chevron mui-bottom">
                <div class="mui-dizhi-add ">

                    <form id="address" action="{{url()->current()}}">
                        {{csrf_field()}}
                        <div class="mui-input-row">
                            <label>收货人</label>
                            <input type="text" name="name"  placeholder="请输入姓名"
                                   value="{{$addr->consignee?? $info->real_name}}">
                        </div>
                        <div class="mui-input-row">
                            <label>手机号码</label>
                            <input type="text" name='phone'  placeholder="手机号码" value="{{$addr->phone?? $info->user_phone}}">
                        </div>

                        <div class="mui-input-row">
                            <label>省/市/区</label>
                            <input type="text"  id='showCityPicker3' readonly  placeholder="请选择省市区"
                                   value="{{get_address($addr->area??'')}}">
                            <input type="hidden" name="city" id='storeCity' value="{{$addr->area ?? ''}}">
                        </div>
                        <div class="mui-input-row">
                            <label>详细地址</label>
                            <textarea name="address"  placeholder="请选择详细地址">{{$addr->address??''}}</textarea>
                        </div>
                        <div class="mui-input-row" style="padding-bottom: 5px;">
                            <label style="width: 33%;">设为默认地址</label>
                            <div class="mui-switch mui-switch-mini  @if(($addr->is_default??0)==1) mui-active @endif">
                                <input type="checkbox" name="is_default" @if(($addr->is_default??0)==1) checked @endif id="mui-moren"  />
                                <div class="mui-switch-handle"></div>
                            </div>
                        </div>
                        <button type="button" class="btns"> 确认</button>

                    </form>

                </div>


            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="{{asset(config('view.frontend.wap_login').'/js/mui.picker.js')}}"></script>
    <script src="{{asset(config('view.frontend.wap_login').'/js/mui.poppicker.js')}}"></script>
    <script src="{{asset(config('view.frontend.wap_login').'/js/city.data.js')}}"></script>
    <script src="{{asset(config('view.frontend.wap_login').'/js/city.data-4.js')}}"></script>
    <script>
        var cityPicker3 = new mui.PopPicker({
            layer: 3
        });
        cityPicker3.setData(cityData4);
        var showCityPickerButton = document.getElementById('showCityPicker3');

        showCityPickerButton.addEventListener('tap', function(event) {
            cityPicker3.show(function(items) {
                $(showCityPickerButton).val(items[0].text +'-' + items[1].text +'-' + items[2].text)
                $('#storeCity').val(items[0].value +','+ items[1].value+',' + items[2].value)
                //返回 false 可以阻止选择框的关闭
                //return false;
            });
        }, false);

        $('.btns')[0].addEventListener('tap',function(){
            var data =$('#address').serialize();
            var url =$('#address').attr('action');
            adddressAjax(data,url)
            //return true;
        })
    </script>
    <script>
        function adddressAjax(data,url)
        {
            $.ajax({
                type: 'post',
                url: url,
                dataType: 'json',
                data: data
            }).done(function (response) {
                if(response.status){
                    mui.toast(response.msg);
                    setTimeout(function () {
                        location.href = response.url;
                    }, 2000);
                }else{
                    mui.toast(response.msg);
                }
            }).fail(function (XMLHttpRequest) {
                if (XMLHttpRequest.status == 422) {
                    var errors = XMLHttpRequest.responseJSON.errors;
                    if(typeof errors == 'object') {
                        for (var index in errors) { // 不推荐这样
                            mui.toast(errors[index][0]);
                            break;
                        }
                    }else{
                        mui.toast(XMLHttpRequest.responseJSON.msg);

                    }
                }else{
                    mui.toast('网络异常,请检查连接');
                }

            }).always(function () {

            });
        }
    </script>
@endpush